<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script> -->
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	
</div>
<script>
	//尽管 Vue.js 提供了 API 动态地添加响应属性，还是推荐在 data 对象上声明所有的响应属性。
	//我们不推荐下面这么做
	
	// var vm = new Vue({
	// 	el : '#root',
	//  	template: '<div>{{msg}}</div>'
	// })
	// // 然后添加 `msg`
	// vm.$set('msg', 'Hello!')
	// 
	// 我们推荐这么做
	var vm = new Vue({
		 el : '#root',
		 data: {
		 	// 以一个空值声明 `msg`
		 	msg: ''
		 },
		 template: '<div>{{msg}}</div>'
	})
	// 然后设置 `msg`
	vm.msg = 'Hello!'

	//这么做有两个原因
	/**
	 *  1.data 对象就像组件状态的模式（schema）。在它上面声明所有的属
	 *  性让组件代码更易于理解。
	 *  2.添加一个顶级响应属性会强制所有的 watcher 
	 *  重新计算，因为它之前不存在，没有 watcher 
	 *  追踪它。这么做性能通常是可以接受的（特别是对比 Angular 
	 *  的脏检查），但是可以在初始化时避免。 
	 */
</script>	
</body>
</html>